/* banner */
.banner{position: relative;}
.banner .swiper-container{overflow: hidden;}
.banner .hb{min-height: 80vh;}
.banner .hb img{width: 100%;height: 100%;opacity: 0;}
.banner .hb .swiper-slide{min-height: 80vh;}
.banner .swiper-slide{overflow: hidden;}
.banner .slide-inner{position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-size: cover;background-position: center top;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;color:#fff;}

.banner .mb{display: none;}
.banner .mb img{width: 100%;}
.banner .swiper-pagination-bullet{transition: all 0.3s;}
.banner .swiper-pagination-bullet-active{width: 24px;background-color: #fff;border-radius: 4px;}
.banner .swiper-button-prev,.banner .swiper-button-next{background-color: rgba(0,0,0,0.3);border-radius: 5px;top: auto;bottom: 15px;left: auto;right: auto;width: 40px;height: 45px;transform: skewX(-10deg);}
.banner .swiper-button-prev{right: calc(8% + 50px);transform: skewX(-10deg) translateY(-15px);background-color: #fff;}
.banner .swiper-button-prev:after{color: #333!important;}
.banner .swiper-button-next{right: 8%;background-color: #006FBD;color: #fff;}
.banner .swiper-button-next:after,.banner .swiper-button-prev:after{font-size: 24px;color: rgba(255, 255, 255, 0.7);}

.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction{width: auto;left: auto;right: calc(10% + 120px);font-weight: 100;font-family: 'swiper-icons';font-size: 60px;color: #fff;}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span{font-size: 40px;display: inline-block;color: #fff;}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span:first-child{transform: translateY(-15px);}
.banner .swiper-pagination,.banner .swiper-pagination.swiper-pagination-fraction span:last-child{transform: translateY(5px);}

/* about */
.about{margin-bottom: 4%;}
.about .n-area{max-width: 1470px;overflow: visible;}
.about .tit{text-align: center;padding-top: 5%;background-image: url(../images/tit-bg.png);background-repeat: no-repeat;background-position: center;background-size: auto 134%;}
.about .tit p{display: inline-block;width: 100%;max-width: 880px;padding: 0 15px 3%;font-size: 16px;}
.about .info{position: relative;width: 100%;transform: skewX(-10deg);}
.about .info img{width: 81%;height: 100%;object-fit: cover;border-top-left-radius: 200px;border-bottom-right-radius: 200px;margin-bottom: 8%;}
.about .info .content{position: absolute;bottom: 0;right: 0;width: 44%;background-image: linear-gradient(to top, rgba(0,111,189,1), rgba(67,183,255,1));color: #fff;padding: 7% 0;border-bottom-right-radius: 200px;}
.about .info .content div{transform: skewX(10deg);}
.about .info .content h3{display: block;width: 60%;margin: 0 auto;font-size: 54px;color: #fff;line-height: 75px;}
.about .info .content h4{display: block;width: 60%;margin: 0 auto;font-size: 22px;text-transform:uppercase;line-height: 30px;margin-bottom: 8%;}
.about .info .content p{width: 60%;margin: 0 auto 8%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;font-size: 16px;line-height: 30px;}
.about .more{margin-left: 20%;}
.about .info .content::before{content: '';display: inline-block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-image: url(../images/graphical.png);background-size: 100% 100%;background-position: left top;background-repeat: no-repeat;}


/* case */
.area.case{padding: 0;}
.case{width: 100%;height: 100vh;}
.case .n-area{padding: 0;max-width: 100%;height: 100%;}
.case .n-area h2{color: #fff;}
.case .c-l{padding: 0;position: relative;height: 100%;}
.case .c-r{padding: 0;height: 100%;}
.case .tit{color: #fff;width: calc(100% + 1px);padding: 8% 15px;background-image: linear-gradient(to top, rgba(0,111,189,1), rgba(67,183,255,1));margin: 0 auto;position: absolute;left: 0;top: 0;z-index: 3;}
.case .tit::before{content: '';display: inline-block;width: 100%;height: 100%;position: absolute;right: 0;top: 0;background-image: url(../images/graphical2.png);background-size: 100% 100%;background-position: right top;background-repeat: no-repeat;max-width: 400px;}
.case .tit div{width: 85%;height: 100%;max-width: 540px;margin: 0 auto;position: relative;z-index: 2;}
.case .tit span{color: #fff;}
.case .tit p{margin: 9% 0 13%;font-size: 16px;line-height: 30px;}
.case .li{position: relative;}
.case .li img{width: 100%;height: 100%;object-fit: cover;}
.case .li::before{content: '';display: inline-block;position: absolute;width: 100%;height: 0%;background-color: rgba(0,0,0,0.3);left: 50%;top: 0;transform: translateX(-50%);transition: all 0.3s;}
.case .li p{display: inline-block;position: absolute;opacity: 0;left: 50%;top: 50%;transform: translate(-50%,-50%);color: #fff;font-size: 24px;transition: all 0.3s;transition-delay: 0.3s;width: 90%;text-align: center;}
.case .li p span{font-size: 16px;display: inline-block;width: 100%;}
.case .li:hover::before{height: 100%;}
.case .li:hover p{opacity: 1;}
.case .p0{height: 100%;}
.case .p0 p{top: 75%;}
.case .p1{width: 100%;height: 45%;float: left;}
.case .p2{width: 60%;height: 55%;float: left;}
.case .p3{width: 40%;height: 55%;float: left;}

/* adv */
.adv{width: 100%;max-width: 1520px;margin: 0 auto;text-align: center;}
.adv .tit{}
.adv li{text-align: center;margin-top: 2%;}
.adv li a{color: #333;}
.adv li h4{font-size: 18px;margin-bottom: 8%;position: relative;display: inline-block;}
.adv li h4 b{font-size: 60px;height: 55px;color: #006FBD;position: absolute;right: 100%;bottom: 5px;font-weight: normal;transform: translateX(25%);font-style: italic;}
.adv li h4 b::after{content: '';display: inline-block;height: 70%;width: 150%;position: absolute;right: 0;bottom: 0;background-image: linear-gradient(to left, rgba(63,146,255,1), rgba(63,146,255,0));opacity: 0.6;z-index: -1;}
.adv li h4 span{position: relative;z-index: 3;}
.adv li p{font-size: 16px;}
.adv .more{color: #333;border: 1px solid #979797;margin: 4% 0 6%;}


/* Pro */
.product{margin: 0 auto;position: relative;padding-top: 6%!important;background-size: 1920px auto;background-position: center -100px;background-repeat: no-repeat;}
.product .n-area{max-width: 1750px;}
.product .tit{position: relative;margin-bottom: 1%;text-align: center;}

.product .pro-img{padding-top: 85%;position: relative;}
.product .pro-img img{width: 100%;height:100%;object-fit: cover;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.product #proSwiper{padding: 50px 0;}
.product #proSwiper .swiper-slide{background-color: #e7e7e7;transition: all 0.3s;}
.product #proSwiper .swiper-slide.swiper-slide-next{transform: scale(1.2);background-color: #F3F3F3;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);z-index: 1;transition: all 0.3s;}
.product .pro-info{color: #333;width: 100%;text-align: center;}
.product .pro-info p{padding: 5% 0;font-size: 32px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;position: absolute;opacity: 0;bottom: 0;background-color: rgba(0,111,189,0.8);color: #fff;width: 100%;transition: all 0.3s;}

.product #proSwiper .swiper-slide.swiper-slide-next .pro-info p{opacity: 1;}
.product #proSwiper .swiper-slide:hover{transform: scale(1.2);background-color: #F3F3F3;box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);z-index: 1;transition: all 0.3s;}
.product #proSwiper .swiper-slide:hover .pro-info p{opacity: 1;}



/* news */
.news{width: 100%;margin-top:5%;margin-bottom: 2%;}
.news li .li-d{width: 100%;}
.news li .li-d .n-img{width: 100%;position: relative;padding-top: 65%;overflow: hidden;}
.news li .li-d .n-img img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;object-fit: cover;transition: all 0.3s;}
.news li .li-d .n-info{width: 100%;}
.news li .li-d .n-info span{display: inline-block;width: 100%;color: #006FBD;font-size: 18px;padding: 12px 0;}
.news li .li-d .n-info h3{width: 100%;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-size: 22px;font-weight: bold;color: #333;margin-bottom: 15px;}
.news li .li-d .n-info i{display: inline-block;width: 50px;height: 50px;border-radius: 50%;background-image: linear-gradient(to left, rgba(151,151,151,1), rgba(151,151,151,0));position: relative;font-size: 30px;margin-left: 15px;transition: all 0.3s;}
.news li .li-d .n-info i::after{content: '→';display: inline-block;position: absolute;left: -15px;top: 50%;transform: translate(0,-50%);color: #333;line-height: 50px;transition: all 0.3s;}

.news li:first-child{height: 430px;margin-bottom: 30px;}
.news li:first-child .li-d{height: 100%;}
.news li:first-child .li-d a{display: block;width: 100%;height: 100%;float: left;}
.news li:first-child .li-d .n-img{width: 50%;height: 100%;float: left;padding-top: 0;}
.news li:first-child .li-d .n-img img{width: calc(100% - 15px);}
.news li:first-child .li-d .n-info{width: 50%;float: left;height: 100%;padding: 2% 2% 0 calc(2% + 15px);color: #333;}
.news li:first-child .li-d .n-info p{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;font-size: 16px;line-height: 30px;}
.news li:first-child .li-d .n-info i{margin-top: 40px;}

.news li .li-d:hover .n-img img{height: 110%;}
.news li .li-d:hover .n-info i{background-image: linear-gradient(to left, rgba(67,183,255,1), rgba(255,172,95,0));}
.news li .li-d:hover .n-info i::after{left: 0px;}


@media screen and (min-width: 0px) and (max-width:1400px){
    .about .info .content h3{font-size: 38px;line-height: 40px;}
    .about .tit p{font-size: 16px;}
    .product .pro-info p{font-size: 24px;}
    .news li .li-d .n-info h3{font-size: 20px;}
}
@media screen and (min-width: 0px) and (max-width:1250px){
    .banner .hb,.banner .hb .swiper-slide{min-height: 60vh;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
    .news .tit h2{text-align: center;}
    .case .tit p{margin: 0 0 4%;font-size: 15px;}
    .about .tit{padding-top: 10%;}
    .about .info{transform: skewX(0deg);height: 570px;}
    .about .info img{width: 100%;height: 100%;border-top-left-radius:0px;border-bottom-right-radius:0px;margin-bottom: 0;}
    .area.about{padding: 0;margin-bottom: 0;}
    .about .info .content{width: 90%;right: 50%;bottom: 50%;border-bottom-right-radius:0px;transform: translate(50%,50%);padding: 5% 0;}
    .about .info .content div{transform: skewX(0);}
    .about .info .content h4{margin-bottom: 3%;}
    .about .info .content p{margin: 0 auto 4%;font-size: 15px;}
    .about .info .content h3,.about .info .content h4,.about .info .content p{width: 90%;max-width: 540px;}
    .about .info .content h3{font-size: 30px;}

    .adv li p{font-size: 15px;}

    .product .pro-info p{font-size: 22px;}

    .news li:first-child .li-d .n-info p{font-size: 15px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
    .banner .hb,.banner .hb .swiper-slide{min-height: 45vh;}
    .about .more{margin: 0 auto;display: block;}
    .case{height: auto;}
    .case .tit{position: relative;}
    .case .c-r{height: 300px;}
    .case .p0{display: none;}
    .case .li{width: 33.333333%;height: 100%;}
    .case .li p{font-size: 20px;font-weight: bold;}
    .case .li p span{font-weight: normal;}
    .adv li{margin-top: 50px;}
    
   
}
@media screen and (min-width: 0px) and (max-width:768px){
    .about .tit p{font-size: 14px;}
    .about .info .content p,.case .tit p{font-size: 14px;}
    .product #proSwiper .swiper-slide.swiper-slide-next{transform: scale(1);box-shadow: 0 0 0 0;}
    .product .pro-info p{font-size: 16px;}

    
    .case .li p{font-size: 17px;}
    .case .li p span{font-size: 14px;}

    .news li:first-child .li-d .n-img{width: 100%;height: 50%;}
    .news li:first-child .li-d .n-img img{width: 100%;}

    .news li:first-child .li-d .n-info{width: 100%;padding: 2% 0 0;}
    .news li:first-child .li-d .n-info p{-webkit-line-clamp:2;}
    .news li:first-child .li-d .n-info i{margin-top: 10px;}
    .news li .li-d .n-info h3{font-size: 18px;}

}
@media screen and (min-width: 0px) and (max-width:750px){
    .banner .hb{display: none;}
    .banner .mb{display: block;}
}
@media screen and (min-width: 0px) and (max-width:440px){
    .about .info .content h3{font-size: 26px;}
    .about .info .content h4{font-size-adjust: 18px;}
    .about .tit p{font-size: 13px;}
    .about .info{height: 480px;}

    .adv li h4{font-size: 16px;}
    .adv li p{font-size: 12px;}
    .adv li h4 b{font-size: 44px;height: 42px;}
    .adv .tit h2{font-size: 22px;}
    
    .product #proSwiper{padding: 25px 0;}
    .case .c-r{height: 240px;}
    .case .li{width: 50%;}
    .case .p1{display: none;}
    .news li:nth-child(2n){padding-right: 7.5px;}
    .news li:nth-child(2n-1){padding-left: 7.5px;}

    .news li:first-child{padding-left: 15px;padding-right: 15px;}
    .news li .li-d .n-info h3{font-size: 17px;}

    .product #proSwiper .swiper-slide .pro-info p{opacity: 1;}


}
@media screen and (min-width: 0px) and (max-width:375px){

}


.txt-swiper .swiper-slide p img{opacity: 0;transform: translateY(-30%);}
.txt-swiper .swiper-slide p img:first-child{animation: fade 2s ease 1 forwards;}
.txt-swiper .swiper-slide p img:last-child{animation: fade 2s ease 1.5s 1 forwards;}
@keyframes fade {
    0%{
        opacity: 0;
        transform: translateY(-30%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}